<template>
  <view class="tabs-box" v-if="lists && lists.length">
    <view class="tabs-item" v-for="(item, index) in lists" :key="index" :class="{ active: index === curIndex }"
      @click="change(item, index)">
      <text>{{ item }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Tabs',
  props: { lists: Array, default: () => ([]) },
  data() {
    return {
      curIndex: 0
    }
  },
  emits: ['change'],
  methods: {
    change(item, index) {
      this.curIndex = index
      this.$emit('change', item);
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-box {
  display: flex;
  width: 100%;
  height: 50rpx;
  border: 2rpx solid #eaeaea;
  border-radius: 4rpx;
  box-sizing: border-box;
  


  .tabs-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #333333;
    border-left: 2rpx solid #eaeaea;
    box-sizing: border-box;

    &:first-child {
      border-left: none;
    }

    &.active {
      background: #f6f6f6;
    }
  }
}
</style>